<template>
  <el-container class="homeContainer">
    <!-- 顶部区域 -->
    <el-header style="height:1.6rem">
      <el-row>
        <el-col :span="24">
          <div class="visitCard">
            <img class="logo" src="../assets/logo.png" alt />
            <p class="companyName">杭州集德才网络科技有限公司</p>
          </div>
        </el-col>
        <el-dropdown class="pop" trigger="click">
          <img src="../assets/rightIcon.png" alt />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <a href="#member">项目成员</a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a href="#norm">开发规范</a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a href="#tool">快捷工具</a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a href="#iTunes">账号管理</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-row>
    </el-header>

    <!-- 主体区域 -->
    <el-main>
      <!-- 项目成员 -->
      <el-card class="box-card">
        <el-row class="titleArea">
          <el-col name="member" id="member">
            <div class="title">项目成员</div>
          </el-col>
        </el-row>

        <el-row class="projectMember" v-for="(item,index) in list" :key="index">
          <el-col :span="3">
            <div class="project">
              <span>项目组</span>
              <p>（{{item.projectName}}）</p>
            </div>
          </el-col>
          <el-col :span="21" class="userBox">
            <div class="userList">
              <div class="userBox" v-for="(obj,i) in item.child" :key="i">
                <img src="../assets/haed.png" alt />
                <p class="username">{{obj.name}}</p>
                <span>{{obj.identity}}</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 开发规范 -->
      <el-card class="box-card">
        <el-row class="titleArea">
          <el-col name="norm" id="norm">
            <div class="title">
              开发规范
              <p class="more">查看更多 &gt;&gt;</p>
            </div>
          </el-col>
        </el-row>

        <el-row class="normBox">
          <el-col :span="24">
            <div class="textArea"> 在项目开发过程中，应该按要求编写好十三种文档，文档编制要求具有针对性、精确性、清晰性、完整性、灵活性、可追溯性。</div>
            <div class="textArea">　　◇可行性分析报告：说明该软件开发项目的实现在技术上、经济上和社会因素上的可行性，评述为了合理地达到开发目标可供选择的各种可能实施方案，说明并论证所选定实施方案的理由。</div>
            <div class="textArea">　　◇项目开发计划：为软件项目实施方案制订出具体计划，应该包括各部分工作的负责人员、开发的进度、开发经费的预算、所需的硬件及软件资源等。</div>
            <div class="textArea">　　◇软件需求说明书（软件规格说明书）：对所开发软件的功能、性能、用户界面及运行环境等作出详细的说明。它是在用户与开发人员双方对软件需求取得共同理解并达成协议的条件下编写的，也是实施开发工作的基础。该说明书应给出数据逻辑和数据采集的各项要求，为生成和维护系统数据文件做好准备。</div>
            <div class="textArea">　　◇概要设计说明书：该说明书是概要实际阶段的工作成果，它应说明功能分配、模块划分、程序的总体结构、输入输出以及接口设计、运行设计、数据结构设计和出错处理设计等，为详细设计提供基础。</div>
            <div class="textArea">　　◇详细设计说明书：着重描述每一模块是怎样实现的，包括实现算法、逻辑流程等。</div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 快捷工具 -->
      <el-card class="box-card">
        <el-row class="titleArea">
          <el-col name="tool" id="tool">
            <div class="title">快捷工具</div>
          </el-col>
        </el-row>

        <el-row class="softwareBox">
          <el-col :span="24">
            <div class="toolBox">
              <img src="../assets/PS.png" alt />
              <div class="toolName">
                <h4>Adobe Photoshop cc</h4>
                <a href="#">https://lanhuapp.com/web/#/item</a>
              </div>
            </div>

            <div class="toolBox">
              <img src="../assets/PS.png" alt />
              <div class="toolName">
                <h4>Adobe Photoshop cc</h4>
                <a href="#">https://lanhuapp.com/web/#/item</a>
              </div>
            </div>

                        <div class="toolBox">
              <img src="../assets/PS.png" alt />
              <div class="toolName">
                <h4>Adobe Photoshop cc</h4>
                <a href="#">https://lanhuapp.com/web/#/item</a>
              </div>
            </div>

                        <div class="toolBox">
              <img src="../assets/PS.png" alt />
              <div class="toolName">
                <h4>Adobe Photoshop cc</h4>
                <a href="#">https://lanhuapp.com/web/#/item</a>
              </div>
            </div>

            <div class="toolBox">
              <img src="../assets/PS.png" alt />
              <div class="toolName">
                <h4>Adobe Photoshop cc</h4>
                <a href="#">https://lanhuapp.com/web/#/item</a>
              </div>
            </div>

            <div class="toolBox">
              <img src="../assets/PS.png" alt />
              <div class="toolName">
                <h4>Adobe Photoshop cc</h4>
                <a href="#">https://lanhuapp.com/web/#/item</a>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 账号管理 -->
      <el-card class="box-card">
        <el-row class="titleArea">
          <el-col name="iTunes" id="iTunes">
            <div class="title">账号管理</div>
          </el-col>
        </el-row>
        <el-row class="accountTube">
          <el-col :span="24">
            <div class="Link">
              账号具体详情点此链接
              <a href="#">https://shimo.im/sheets/kKxcyCxVtWXx9px8/MODOC/</a>
            </div>
             <div class="Link">
              账号具体详情点此链接
              <a href="#">https://shimo.im/sheets/kKxcyCxVtWXx9px8/MODOC/</a>
            </div>
             <div class="Link">
              账号具体详情点此链接
              <a href="#">https://shimo.im/sheets/kKxcyCxVtWXx9px8/MODOC/</a>
            </div>
             <div class="Link">
              账号具体详情点此链接
              <a href="#">https://shimo.im/sheets/kKxcyCxVtWXx9px8/MODOC/</a>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </el-main>

    <!-- 底部区域 -->
    <el-footer style="height:1.6rem">
      <el-row>
        <el-col :span="24">
          <div class="adminBox">
            <img src="../assets/haed.png" alt />
            <p>管理员</p>
            <p>QQ号：5687329456</p>
            <p>手机号：15432670214</p>
            <div class="weixin">
              <p>微信号：16660230326351</p>
              <div class="ewm">
                <img src="../assets/ewm.png" alt />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      ico: "right",
      list: [
        {
          projectName: "积分制",
          child: [
            {
              name: "王静",
              hadeImage: "../assets/haed.png",
              identity: "UI"
            },
            {
              name: "张量",
              hadeImage: "../assets/haed.png",
              identity: "PHP"
            },
            {
              name: "李想想",
              hadeImage: "../assets/haed.png",
              identity: "前端"
            },
            {
              name: "思追",
              hadeImage: "../assets/haed.png",
              identity: "产品"
            },
            {
              name: "金子轩",
              hadeImage: "../assets/haed.png",
              identity: "IOS"
            },
            {
              name: "蓝远",
              hadeImage: "../assets/haed.png",
              identity: "测试"
            },
            {
              name: "聂怀桑",
              hadeImage: "../assets/haed.png",
              identity: "安卓"
            }
          ]
        },
        {
          projectName: "爻信",
          child: [
            {
              name: "王静",
              hadeImage: "../assets/haed.png",
              identity: "UI"
            },
            {
              name: "张量",
              hadeImage: "../assets/haed.png",
              identity: "PHP"
            },
            {
              name: "李想想",
              hadeImage: "../assets/haed.png",
              identity: "前端"
            },
            {
              name: "思追",
              hadeImage: "../assets/haed.png",
              identity: "产品"
            },
            {
              name: "金子轩",
              hadeImage: "../assets/haed.png",
              identity: "IOS"
            },
            {
              name: "蓝远",
              hadeImage: "../assets/haed.png",
              identity: "测试"
            },
            {
              name: "聂怀桑",
              hadeImage: "../assets/haed.png",
              identity: "安卓"
            }
          ]
        },
        {
          projectName: "回头客",
          child: [
            {
              name: "王静",
              hadeImage: "../assets/haed.png",
              identity: "UI"
            },
            {
              name: "张量",
              hadeImage: "../assets/haed.png",
              identity: "PHP"
            },
            {
              name: "李想想",
              hadeImage: "../assets/haed.png",
              identity: "前端"
            },
            {
              name: "思追",
              hadeImage: "../assets/haed.png",
              identity: "产品"
            },
            {
              name: "金子轩",
              hadeImage: "../assets/haed.png",
              identity: "IOS"
            },
            {
              name: "蓝远",
              hadeImage: "../assets/haed.png",
              identity: "测试"
            },
            {
              name: "聂怀桑",
              hadeImage: "../assets/haed.png",
              identity: "安卓"
            }
          ]
        }
      ]
    };
  },
  methods: {}
};
</script>

<style lang='less'>
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
  .adminBox {
    flex-direction: column;
    width: 100%;
    font-size: 0.16rem;
    img {
      display: none;
    }
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
  .adminBox {
    flex-direction: column;
    width: 100%;
    font-size: 0.16rem;
    img {
      display: none;
    }
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 25px;
  }
  .adminBox {
    flex-direction: column;
    width: 100%;
    font-size: 0.16rem;
    img {
      display: none;
    }
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
    .adminBox {
      flex-direction: column;
      width: 100%;
      font-size: 0.16rem;
      img {
        display: none;
      }
    }
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
    .adminBox {
      flex-direction: row;
      width: 100%;
      img {
        display: block;
      }
    }
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 40px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 44px;
  }
}

html {
  max-width: 1920px;
  min-width: 320px;
  margin: 0 auto;
}

* {
  margin: 0;
  padding: 0;
  color: #333;
}

.el-container {
  overflow: hidden;
}

a {
  text-decoration: none;
}
.el-main {
  background: #f1f2f9;
}
.homeContainer {
  height: 100%;
}
//头部,底部样式
.el-header,
.el-footer {
  height: 1.6rem;
  background: #1b80d2;
  position: relative;
  .el-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
  }
  .visitCard {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .logo {
    width: 0.773333rem;
    height: 0.733333rem;
  }
  .companyName {
    font-size: 0.4rem;
    margin-left: 0.4rem;
    color: #ffffff;
  }
  .adminBox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 0.293333rem;
    color: #ffffff;
    p {
      display: block;
      margin: 0 0.4rem;
      color: #ffffff;
    }
    img {
      width: 1.066667rem;
      height: 1.066667rem;
    }
  }
  .weixin {
    position: relative;
  }
  .weixin:hover .ewm {
    display: block;
  }
  .ewm {
    position: absolute;
    display: none;
    top: -2rem;
    left: 30%;
    width: 2rem;
    height: 2rem;
    border-radius: 0.13rem;
    background: #fff;

    img {
      margin: 0.066667rem auto;
      width: 90%;
      height: 90%;
    }
  }
}

.pop {
  position: absolute;
  right: .266667rem;
  top: 0;
  img {
    width: 0.466667rem;
    height: 0.346667rem;
  }
}

//卡片区标题样式
.el-card {
  margin-bottom: 0.453333rem;
  .titleArea {
    .title {
      font-size: 0.346667rem;
      font-weight: bold;
      color: #333;
      .more {
        display: inline-block;
        font-size: 0.266667rem;
        margin-left: 0.44rem;
        color: #1b80d2;
        font-weight: bold;
      }
    }
    .title::before {
      content: "";
      display: inline-block;
      height: 0.333333rem;
      margin-right: 0.213333rem;
      border-left: 0.106667rem solid #1b80d2;
    }
  }
}

//项目成员
.project {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.346667rem;
  span {
    display: block;
    background: #ebf6ff;
    font-size: 0.346667rem;
    color: #1369af;
    min-width: 2.133333rem;
    height: 0.733333rem;
    text-align: center;
    line-height: 0.733333rem;
    border-radius: 0.133333rem;
    font-weight: bold;
  }
  p {
    min-width: 2.133333rem;
    text-align: center;
    display: block;
    font-size: 0.266667rem;
    color: #333333;
    margin-top: 0.16rem;
  }
}

.projectMember {
  margin: 0.933333rem 0 0;
  display: flex;
  flex-direction: row;
}
.userList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.userBox {
  display: flex;
  flex-direction: column;
  margin-left: 0.8rem;
  margin-bottom: 0.533333rem;
  img {
    min-width: 0.8rem;
    height: 0.8rem;
    margin: 0 auto;
    border-radius: 50%;
  }
  .username {
    font-size: 0.24rem;
    color: #333;
    margin: 0.266667rem 0 0.173333rem;
    text-align: center;
  }
  span {
    display: block;
    min-width: 0.76rem;
    height: 0.32rem;
    padding: 0.066667rem 0.133333rem;
    border-radius: 0.053333rem;
    background: #ffebfb;
    font-size: 0.213333rem;
    text-align: center;
    margin: 0 auto;
    line-height: 0.32rem;
    color: #f949d6;
  }
}
//开发规范样式
.normBox {
  .textArea {
    width: 100%;
    height: auto;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    font-size: 0.266667rem;
    color: #666;
    margin: 0.573333rem 0.16rem 0;
  }
}

// 快捷工具样式
.softwareBox {
  margin: 0.533333rem;
  .el-col {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.toolBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  height: auto;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  margin: 0 0.8rem 0.613333rem 0;
  min-width: 6.933333rem;
  border-radius: 0.133333rem;
  background: #fafafa;
  .toolName {

    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 0.666667rem;
  }
  img {
    width: 0.44rem;
    height: 0.44rem;
    margin-left: 0.586667rem;
  }
  h4 {
    font-size: 0.32rem;
    margin-top: 0.133333rem;
  }
  a {
    font-size: 0.213333rem;
    margin: 0.093333rem 0;

    color: #138fe9;
  }
}

//账号管理样式
.accountTube {
  margin-top: 0.666667rem;
  .Link {
    width: 100%;
    height: auto;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    margin-left: 0.2rem;
    font-size: 0.266667rem;
    a {
      color: #1b80d2;
      font-size: 0.266667rem;
    }
  }
}
</style>